<template>
    <div :id="id" :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
import resize from '../mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'line-chart2'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        }
    },

    data() {
        return {
            chart: null,
        }
    },
    mounted() {
        this.initChart()
    },
    methods:{
        initChart(){

         
            const myChart =  echarts.init(document.getElementById(this.id));

            const option = {
               tooltip:{
                   trigger:"axis"
               },
               grid:{
                   left:"10",
                   top:"30",
                   right:"10",
                   bottom:"10",
                   containLabel:true, // 是否显示刻度标签 如果是true 就显示 否则反之
               },

                xAxis:[
                    {
                        type:"category",
                        boundaryGap:false, // 是否让我们的线条和坐标轴有缝隙
                        data:[
                            "01",
                            "02",
                            "03",
                            "04",
                            "05",
                            "06",
                            "07",
                            "08",
                            "09",
                            "10",
                            "11",
                            "12",
                            "13",
                            "14",
                            "15",
                            "16",
                            "17",
                            "18",
                            "19",
                            "20",
                            "21",
                            "22",
                            "23",
                            "24",
                            "25",
                            "26",
                            "26",
                            "28",
                            "29",
                            "30"
                        ],
                        // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: 12
                            }
                        },
                        // x轴线的颜色为   rgba(255,255,255,.2)
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.2)"
                            }
                        }
                    }
                ],

                yAxis:[
                    {
                        type: "value",
                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        },
                            axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: 12
                            }
                        },
                        // 修改分割线的颜色
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    }  
                ],

                series:[
                    {
                        name:"邮件营销",
                        type:"line",
                        smooth:true,
                        lineStyle:{   // 单独修改当前线条的样式
                            color:'#0184d5',
                            widtd:"2"
                        },
                        areaStyle:{  //填充颜色设置
                            color:new echarts.graphic.LinearGradient(
                                0,0,0,1,
                                [
                                    {
                                        offset: 0,
                                        color: "rgba(1, 132, 213, 0.4)" // 渐变色的起始颜色
                                    },
                                    {
                                        offset: 0.8,
                                        color: "rgba(1, 132, 213, 0.1)" // 渐变线的结束颜色
                                    }
                                ],
                                false
                            ),
                            shadowColor: "rgba(0, 0, 0, 0.1)"
                        },
                        symbol:"circle",
                        symbolSize:8,
                        symbol: "circle", // 设置拐点
                        symbolSize: 8, // 拐点大小
                        showSymbol: false, // 开始不显示拐点， 鼠标经过显示
                        itemStyle: { // 设置拐点颜色以及边框
                            color: "#0184d5",
                            borderColor: "rgba(221, 220, 107, .1)",
                            borderWidth: 12
                        },
                        data: [
                            30,
                            40,
                            30,
                            40,
                            30,
                            40,
                            30,
                            60,
                            20,
                            40,
                            30,
                            40,
                            30,
                            40,
                            30,
                            40,
                            30,
                            60,
                            20,
                            40,
                            30,
                            40,
                            30,
                            40,
                            30,
                            40,
                            20,
                            60,
                            50,
                            40
                        ]
                    },
                    {
                        name: "联盟广告",
                        type: "line",
                        smooth: true,
                         lineStyle: {
                            normal: { //为什么用normal
                                color: "#00d887",
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)"
                                    },
                                    {
                                    offset: 0.8,
                                    color: "rgba(0, 216, 135, 0.1)"
                                    }
                                ],
                                false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)"
                            }
                        },
                         // 设置拐点 小圆点
                        symbol: "circle",
                        // 拐点大小
                        symbolSize: 5,
                        // 设置拐点颜色以及边框
                        itemStyle: {
                            color: "#00d887",
                            borderColor: "rgba(221, 220, 107, .1)",
                            borderWidth: 12
                        },
                        // 开始不显示拐点， 鼠标经过显示
                        showSymbol: false,
                        data: [
                            130,
                            10,
                            20,
                            40,
                            30,
                            40,
                            80,
                            60,
                            20,
                            40,
                            90,
                            40,
                            20,
                            140,
                            30,
                            40,
                            130,
                            20,
                            20,
                            40,
                            80,
                            70,
                            30,
                            40,
                            30,
                            120,
                            20,
                            99,
                            50,
                            20
                        ]
                    }
                ]

            };

            // 3. 把配置给实例对象
            myChart.setOption(option);

            // 4. 让图表跟随屏幕自动的去适应
            //柱状图可以不用手动设置? 折线图需要手动设置? 
            window.addEventListener("resize", function() {
                myChart.resize();
            });
           
        },

        change_chart_1(){
            console.log(1)
        },

        change_chart_2(){
            console.log(2)
        }
    }



}

</script>

<style lang="scss" scoped>
    h2 {
      height: 0.8rem;
      color: #fff;
      line-height: 0.8rem;
      text-align: center;
      font-size: 0.8rem;
      font-weight: 400;
      a {
        color: #fff;
        text-decoration: none;
        margin: 0 0.125rem;
      }
    }
</style>